<template>
    <div>
        <li>
            <div>  
                <!-- 主分类的名称 -->
                {{ data.name }}
            </div>
            <ul v-if="data.childlist && data.childlist.length > 0">   <!-- 如果子类存在就遍历，不存在就不遍历 -->
                <Reply v-for="child in data.childlist" :key="child.id" :data="child" /> <!-- 开始递归调用，斜线是符合w3c规范 -->
            </ul>
        </li>
    </div>
</template>

<script>
export default {

    name:'Reply',   // 命名空间   实现组件递归所必须
    props:['data'], // 父组件传值，子组件接值，这样才能直接或间接调用自身   
    data() {
        return {
            
        }
    },
}
</script>

<style lang="">
    ul {
        padding-left:50px;
        list-style: none;
    }
</style>